<template>
    <el-dialog title="修改密码" width="400px" :close-on-click-modal="false" v-if="visible" :modal-append-to-body="false"
        @close="$emit('close')" :visible="visible">
        <el-form :model="form" :rules="rules" ref="ruleForm" style="width: 300px">
            <el-form-item label="新密码" prop="password">
                <el-input v-model="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="newPassword">
                <el-input type="password" v-model="form.newPassword" autocomplete="off" show-password></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('close')">取 消</el-button>
            <el-button type="primary" @click="handleClickSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { ModifyPassword } from "@/api/user";
import { ModifyDriverPassword } from "@/api/information";
import md5 from "js-md5";

export default {
    name: 'passwordChange',
    components: {},
    /**
     * origin 'driver' 司机修改密码   默认为个人中心的修改密码（通过mobile修改）
     */
    props: ['visible', 'mobile', 'origin', 'id'],
    data() {
        var validateNewPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            form: {},
            rules: {
                password: [
                    {
                        required: true,
                        pattern: /^(?=.*[0-9].*)(?=.*[A-Za-z].*).{6,18}$/,
                        message: "密码6-18位字符，至少含1个字母",
                        trigger: "blur",
                    },

                ],
                newPassword: [
                    {
                        required: true,
                        message: "请再次输入密码",
                        trigger: "blur",
                    },
                    { validator: validateNewPass, trigger: "blur", }
                ]
            },
        };
    },
    mounted() { },
    methods: {
        handleClickSubmit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (!valid) return;
                if (this.origin === 'driver') {
                    ModifyDriverPassword(
                        {
                            "id": this.id * 1,
                            "password": md5(this.form.password),
                        }
                    ).then((res) => {
                        if (res.code === 10000) {
                            this.$message({
                                type: "success",
                                message: `修改密码成功!`,
                            });
                            this.$emit('close');
                        } else {
                            this.$message({
                                type: "error",
                                message: res.message,
                            });
                        }
                    });
                } else {
                    ModifyPassword({
                        mobile: this.mobile,
                        new_password: md5(this.form.password),
                    }).then((res) => {
                        if (res.code === 10000) {
                            this.$message({
                                type: "success",
                                message: `修改密码成功!`,
                            });
                            this.$store.dispatch("LogOut").then(() => {
                                location.reload();
                                this.$emit('close');
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.message,
                            });
                        }
                    });
                }
            });
        }
    },
};
</script>
<style lang="scss" scoped>
.wrapper {}
</style>